---
slug: /components/plate
title: Plate
---

```ts live
() => {
  const id = 'plate';
  const { setEnabled, resetEditor } = usePlateActions(id);
  const enabled = useStoreEditorEnabled(id);

  return (
    <>
      <button
        className="cursor-pointer"
        type="button"
        onClick={() => {
          setEnabled(!enabled);
        }}
      >
        {enabled ? 'Disable editor' : 'Enable editor'}
      </button>
      <button
        className="ml-2 cursor-pointer"
        type="button"
        onClick={() => {
          resetEditor(id);
        }}
      >
        Reset editor (history)
      </button>
      <p />
      <Plate
        id={id}
        editableProps={editableProps}
        initialValue={initialValuePlainText}
      />
    </>
  );
}
```